<template>
  <div class="person-home-container">
    <!-- 个人名片区域 -->
    <div class="profile-card">
      <div class="avatar-container">
        <img :src="avatar" alt="用户头像" class="user-avatar">
      </div>
      <div class="user-info">
        <div class="user-name">{{ userInfo.nickname }}</div>
        <div class="user-account">账号: {{ userInfo.username }}</div>
      </div>
      <div class="user-info">
      <van-cell class="cell" is-link  value="设置" @click="toPersonalDetails" style="text-align: right">
      </van-cell>
      </div>
    </div>


    <!-- 机器人区域 -->
    <div class="robot-section">
      <div class="section-header">
        <div class="section-title">我的机器人</div>
        <div class="setting-icon" @click="goToRobotSetting">
          <van-icon name="setting-o" size="20" />
        </div>
      </div>

      <!-- 修改为网格布局 -->
      <div class="robot-grid">
        <div
          v-for="(robot) in robots"
          :key="robot.id"
          class="robot-item"
        >
          <div class="robot-avatar-container">
            <img :src="robot.avatar" alt="机器人头像" class="robot-avatar">
          </div>
          <div class="robot-name">{{ robot.name }}</div>
        </div>
      </div>
    </div>

<!--    <div class="logout-section">-->
<!--        <div class="logout-button" @click="handleLogout">-->
<!--            &lt;!&ndash; <van-icon name="revoke" size="18" /> &ndash;&gt;-->
<!--            <span>退出登录</span>-->
<!--        </div>-->
<!--    </div>-->
  </div>
</template>

<script>
import { getAction,postAction,getFileAccessHttpUrl } from '@/api'
import { Dialog } from 'vant'
export default {
  name: "PersonHome",
  data() {
    return {
      userInfo: {
        avatar: "/static/mobile/img/common/user_default.png",
        nickname: "名称",
        username: ""
      },
      robots: [],
      pullLoading: false,
      avatar:'',
    }
  },
  created() {
	this.initMyBot()
	console.log('store:',this.$store)
	this.userInfo.avatar = getFileAccessHttpUrl(this.$store.getters.avatar)
	this.userInfo.username = this.$store.getters.username
	this.userInfo.nickname = this.$store.getters.nickname
  },
  methods: {
    toPersonalDetails(){
      this.$router.push({name: 'personalDetails'})
    },
    goToRobotSetting() {
		// 跳转到机器人设置页面
		this.$router.push('/coordination/myHome/myRobot');
		console.log("进入机器人设置页面");
    },

	initMyBot(){
		postAction('/sys/chat/bot/getBot', {
			userId: this.userId
		}).then((res) => {
		if (res.success) {
			this.processRobots(res.result)
		} else {
			console.error('加载机器人失败:', res.message);
		}
		}).catch((err) => {
			console.error('加载机器人异常:', err);
		});

    this.pullLoading = true
    getAction('/sys/user/queryById',{id:this.$store.getters.userid}).then(res=> {
      this.pullLoading = false
      if (res.success) {
        let perArr = res.result
        if (perArr.avatar && perArr.avatar.length > 0)
          this.avatar = getFileAccessHttpUrl(perArr.avatar)
      }
    }).catch(e=>{
      console.log("请求错误",e)
      this.error = true;
    })

	},
	processRobots(list) {
		list.forEach((o) => {
			o.avatar = o.avatar
				? getFileAccessHttpUrl(o.avatar)
				: '/app/static/mobile/img/common/robot_default.png';
		});
		this.robots = list;
	},
	handleLogout() {
		const self = this
		Dialog.confirm({
			title: '提示',
			message:"您确定要退出吗?"
		}).then(() => {
			self.$router.push({path: '/logout'})
		}).catch(() => {
		})

	},
  }
}
</script>

<style scoped>
/deep/ .van-cell__value--alone{
  text-align: right !important;
}
.person-home-container {
  padding: 20px 16px;
  /*background-color: #f7f8fa;*/
  /*background-color: #fbfbfb;*/
  background: linear-gradient(180deg, #F4FCFE, #fff);
  min-height: 100vh;
}

/* 个人名片样式 */
.profile-card {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

.avatar-container {
  margin-right: 20px;
}

.user-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f0f0f0;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.user-account {
  font-size: 15px;
  color: #666;
}

/* 机器人区域样式 */
.robot-section {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.setting-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #333;;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.setting-icon:active {
  background-color: #e8e8e8;
  transform: scale(0.95);
}

/* 修改为网格布局 */
.robot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 每行4列 */
  gap: 16px; /* 项目间距 */
  padding: 8px 0;
}

.robot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.robot-avatar-container {
  margin-bottom: 8px;
}

.robot-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f0f0f0;
  transition: all 0.3s;
}

.robot-item:active .robot-avatar {
  transform: scale(0.95);
}

.robot-name {
  font-size: 14px;
  color: #333;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.logout-section {
  margin-top: 24px;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.logout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-size: 16px;
  color: #26B1A1;
  transition: background-color 0.3s;
}

.logout-button span {
  margin-left: 10px;
  font-weight: 500;
}

/* 全局样式 - 退出确认弹窗 */
.logout-dialog {
  border-radius: 16px;
}

.logout-dialog .van-dialog__confirm {
  color: #ee0a24 !important;
}
</style>
